<template>
	<view class="content">

		<!-- 发货人部分 -->
		<view class="item_div">

			<view class="item_sub_div">
				<view class="item_sub_txt">运单号</view>
				<input class="et_sub_txt" placeholder="请输入单号" maxlength="48" @input="onInputOrderSn" :value="info.order_sn" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">下单时间</view>
				<uni-datetime-picker id="uni_dt_picker" type="datetime" hide-second :border="false" :clear-icon="false" :value="info.create_time" return-type="timestamp"
					@change="changeLog" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">发货人姓名</view>
				<input class="et_sub_txt" placeholder="请输入发货人姓名" maxlength="24" @input="onInputSenderName" :value="info.sender_name" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">发货人电话</view>
				<input class="et_sub_txt" placeholder="请输入发货人电话" type="number" maxlength="16" @input="onInputSenderMobile" :value="info.sender_mobile" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

		</view>

		<!-- 收货人部分 -->
		<view class="item_div">

			<view class="item_sub_div">
				<view class="item_sub_txt">收货人姓名</view>
				<input class="et_sub_txt" placeholder="请输入收货人姓名" maxlength="24" @input="onInputReceiverName" :value="info.receiver_name" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">收货人电话</view>
				<input class="et_sub_txt" placeholder="请输入收货人电话" type="digit" maxlength="16" @input="onInputReceiverMobile" :value="info.receiver_mobile" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div" @click="onOpenPop(1)">
				<view class="item_sub_txt">收货地址</view>
				<view style="text-align: right;font-size: 28rpx;">
					{{info.receiver_area ? `${info.receiver_province}${info.receiver_city}${info.receiver_area}` : '点击选择地区'}} >
				</view>
			</view>

			<view class="item_sub_div">
				<view class="item_sub_txt" style="display: none;">详细地址</view>
				<input class="et_sub_txt" style="width: 100%;background:;" placeholder="请输入详细地址" @input="onInputReceiverAddress" :value="info.receiver_address" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

		</view>

		<!-- 货物信息 交货/配送方式  -->
		<view class="item_div">

			<view v-for="(item,index) in goods_list">
				<view class="item_sub_div">
					<view class="item_sub_txt" style="text-decoration: underline;">{{index + 1}}. 货物名称</view>
					<input class="et_sub_txt" placeholder="请输入货物名称" maxlength="24" @input="onInputGoodsName($event,item,index)" :value="item.goods_name" />
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

				<view class="item_sub_div">
					<view class="item_sub_txt">货物数量(件)</view>
					<input class="et_sub_txt" placeholder="请输入数量" type="digit" maxlength="8" @input="onInputGoodsNum($event,item,index)" :value="item.goods_num" />
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

				<view class="item_sub_div">
					<view class="item_sub_txt">货物重量(吨)</view>
					<input class="et_sub_txt" placeholder="请输入重量" type="digit" maxlength="8" @input="onInputGoodsWeight($event,item,index)" :value="item.goods_weight" />
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

				<view class="item_sub_div">
					<view class="item_sub_txt">货物体积(方)</view>
					<input class="et_sub_txt" placeholder="请输入体积" type="digit" maxlength="8" @input="onInputGoodsVolume($event,item,index)" :value="item.goods_volume" />
				</view>

				<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>
			</view>

			<view style="align-self: center;padding: 36rpx 12rpx 12rpx 12rpx;font-weight: bold;display: none;" @click.stop="onAddGoods">
				+添加货物
			</view>

		</view>

		<!-- 交货/配送方式  -->
		<view class="item_div">

			<view class="item_txt_div" style="display: none;">
				<view class="item_txt">配送方式</view>
				<view class="type_div">
					<view :class="info.handover == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onPsType(1)">用户自提</view>
					<view :class="info.handover == 2 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onPsType(2)">送货上门</view>
				</view>
			</view>

			<!-- <view style="width: 100%;height: 1rpx;background: #ededed;margin: 12rpx 0 0 0;"></view> -->

			<view class="item_txt_div">
				<view class="item_txt">支付方式</view>
				<view class="type_div">
					<view :class="info.pay_kind == 2 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onPayType(2)">提付</view>
					<view :class="info.pay_kind == 3 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onPayType(3)">回付</view>
				</view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 12rpx 0 0 0;"></view>

			<view class="item_txt_div">
				<view class="item_txt">是否回单</view>
				<view class="type_div">
					<view :class="info.huidan == 1 ? 'btn_type_sel' : 'btn_type'" @click.stop="onHdType(1)">是</view>
					<view :class="info.huidan == 0 ? 'btn_type_sel' : 'btn_type'" style="margin: 0 0 0 18rpx;" @click.stop="onHdType(0)">否</view>
				</view>
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">回单数量</view>
				<input class="et_sub_txt" placeholder="请输入回单数量" type="number" maxlength="8" @input="onInputHuidanNum" :value="info.huidan_num" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

			<view class="item_sub_div">
				<view class="item_sub_txt">备注</view>
				<input class="et_sub_txt" placeholder="请输入备注" @input="onInputRemark" :value="info.remark" />
			</view>

			<view style="width: 100%;height: 1rpx;background: #ededed;margin: 0rpx 0 0 0;"></view>

		</view>

		<!-- 确定 -->
		<view class="btn_ok" @click="onOk">确定</view>

		<!-- 展示弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="true">
				<view class="pop_div">
					<view class="pop_div_1">
						<view style="padding: 0 16rpx 0 16rpx;font-weight: normal;color: #666;" @click="onClosePop(0)">关闭</view>
						<view>选择地区</view>
						<view style="padding: 0 16rpx 0 16rpx;font-weight: normal;" @click="onClosePop(1)">确定</view>
					</view>

					<view class="pop_div_2">
						<picker-view :value="value" style="width: 100vw;height: 100%;" @change="onPickerChange" @pickstart="onPickStart">
							<picker-view-column style="text-align: center;">
								<view v-for="(item,index) in curr_pro_list">{{curr_pro_list[index].label}}</view>
							</picker-view-column>
							<picker-view-column style="text-align: center;">
								<view v-for="(item,index) in curr_city_list">{{curr_city_list[index].label}}</view>
							</picker-view-column>
							<picker-view-column style="text-align: center;">
								<view v-for="(item,index) in curr_area_list">{{curr_area_list[index].label}}</view>
							</picker-view-column>
						</picker-view>
					</view>

				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { getUInfo, } from '@/util/util.js'
	import { provinceCityData, } from '@/util/area_data.js'
	export default {
		data() {
			return {

				value: [14, 11, 0], // 地区索引
				curr_pro_list: [],
				curr_city_list: [],
				curr_area_list: [],

				// 货物信息
				goods_list: [{
					goods_name: '',
					goods_num: '',
					goods_weight: '',
					goods_volume: '',
				}],
				info: {
					sender_name: '',
					sender_mobile: '',
					receiver_name: '',
					receiver_mobile: '',
					receiver_address: '',
					receiver_province: '',
					receiver_city: '',
					receiver_area: '',
					handover: 1, // 配送方式 1 自提 2 送货
					pay_kind: 2, // 支付方式 2 到付 3 回付
					huidan: 0, // 是否回单
					huidan_num: 0, //回单数量
					remark: '',
					create_time: new Date().getTime(), // 手动录入下单时间
					order_sn: '', // 手填单号
				},
			}
		},

		onLoad(opts) {
			// 选择物流公司
			uni.$on('onSelCom', (data) => {
				// console.log('监听到onSelCom，参数=' + JSON.stringify(data));
			})

			// console.log('省市区数据 = ', provinceCityData);
			this.setAreaData()
		},

		methods: {

			// 选择日期时间
			changeLog(e) {
				console.log('选择日期时间 = ', JSON.stringify(e));
				this.info.create_time = e
			},

			// 为picker-view设置数据
			setAreaData() {
				try {
					this.curr_pro_list = provinceCityData
					this.curr_city_list = provinceCityData[this.value[0]].children
					this.curr_area_list = provinceCityData[this.value[0]].children[this.value[1]].children
				} catch (error) {}
			},
			// picker改变
			onPickerChange(e) {
				this.value = e.detail.value
				this.setAreaData()
			},
			// pucker开始滑动的时候执行
			onPickStart() {
				// this.value[1] = 0
				// this.value[2] = 0
			},
			// 打开popup
			onOpenPop(flag) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			onClosePop(flag) {
				this.$refs.popup.close()
				if (flag == 1) {
					this.info.receiver_province = this.curr_pro_list[this.value[0]].label
					this.info.receiver_city = this.curr_city_list[this.value[1]].label
					this.info.receiver_area = this.curr_area_list[this.value[2]].label
				}
			},
			// 添加货物
			onAddGoods() {
				if (this.goods_list && this.goods_list.length >= 6) {
					uni.showToast({ icon: 'none', title: '已达到货物上限' })
					return
				}
				this.goods_list.push({})
				uni.showToast({ icon: 'none', title: '已添加货物' })
			},
			// 选择是否回单
			onHdType(type) {
				this.info.huidan = type
			},
			// 选择支付方式
			onPayType(type) {
				this.info.pay_kind = type
			},
			// 选择配送方式
			onPsType(type) {
				this.info.handover = type
			},

			// 输入备注
			onInputRemark(e) {
				this.info.remark = e.detail.value
			},
			// 输入收货人地址
			onInputReceiverAddress(e) {
				this.info.receiver_address = e.detail.value
			},
			// 输入收货人电话
			onInputReceiverMobile(e) {
				this.info.receiver_mobile = e.detail.value
			},
			// 输入收货人姓名
			onInputReceiverName(e) {
				this.info.receiver_name = e.detail.value
			},
			// 输入发货人电话
			onInputSenderMobile(e) {
				this.info.sender_mobile = e.detail.value
			},
			// 输入发货人姓名
			onInputSenderName(e) {
				this.info.sender_name = e.detail.value
			},
			// 输入回单数量
			onInputHuidanNum(e) {
				this.info.huidan_num = e.detail.value
			},
			// 输入体积
			onInputGoodsVolume(e, item, index) {
				this.goods_list[index].goods_volume = e.detail.value
			},
			// 输入重量
			onInputGoodsWeight(e, item, index) {
				this.goods_list[index].goods_weight = e.detail.value
			},
			// 输入数量
			onInputGoodsNum(e, item, index) {
				this.goods_list[index].goods_num = e.detail.value
			},
			// 输入名称
			onInputGoodsName(e, item, index) {
				this.goods_list[index].goods_name = e.detail.value
			},
			// 输入单号
			onInputOrderSn(e, item, index) {
				this.info.order_sn = e.detail.value
			},

			// 确定
			onOk() {
				let that = this
				if (!this.info.order_sn) {
					uni.showToast({ icon: 'none', title: '请输入单号' })
					return
				}
				if (!this.info.sender_mobile) {
					uni.showToast({ icon: 'none', title: '请输入发货人电话' })
					return
				}
				if (!this.info.receiver_mobile) {
					uni.showToast({ icon: 'none', title: '请输入收货人电话' })
					return
				}
				if (!this.goods_list[0].goods_name) {
					uni.showToast({ icon: 'none', title: '请输入货物名称' })
					return
				}

				let newObj = {
					...this.info,
					create_time: Math.floor(this.info.create_time / 1000),
					goods: JSON.stringify(this.goods_list)
				}
				console.log('准备提交的数据 = ', newObj);
				uni.showModal({ title: '提示', content: '是否提交发货信息？', success: (res) => { res.confirm && that.createOrder(newObj) } })
			},

			// 接口:提交发货
			async createOrder(newObj) {
				let that = this
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$createCmmOrder2({ ...newObj })
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: `${res.msg}`,
						confirmText: '继续下单',
						cancelText: '确定',
						success: (res) => {
							if (res.confirm) {
								that.onClearAll()
							}
						}
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 清空所有
			onClearAll() {
				this.info = {
					sender_name: '',
					sender_mobile: '',
					receiver_name: '',
					receiver_mobile: '',
					receiver_address: '',
					receiver_province: '',
					receiver_city: '',
					receiver_area: '',
					handover: 1, // 配送方式 1 自提 2 送货
					pay_kind: 2, // 支付方式 2 到付 3 回付
					huidan: 0, // 是否回单
					huidan_num: 0, //回单数量
					remark: '',
					create_time: new Date().getTime(), // 手动录入下单时间
				}
				this.goods_list = [{}]
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #F8F8F8;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 12rpx 24rpx 12rpx 24rpx;
		padding: 24rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.tag {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 22rpx;
		text-align: center;
		color: white;
		border-radius: 8rpx;
	}

	.item_txt_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		margin: 10rpx 0 0 0;
	}

	.item_txt {
		font-size: 28rpx;
		font-weight: bold;
		margin: 12rpx 0 0 0;
	}

	.item_sub_div {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		margin: 10rpx 0 0 0;
		/* background-color: red; */
	}

	.item_sub_txt {
		font-size: 28rpx;
		font-weight: bold;
		margin: 0rpx 0 0 0rpx;
	}

	.et_sub_txt {
		width: 60%;
		height: 100%;
		text-align: right;
		font-size: 28rpx;
		/* background-color: red; */
	}

	.type_div {
		display: flex;
		align-items: center;
	}

	.btn_type {
		border-radius: 8rpx;
		padding: 8rpx 16rpx 8rpx 16rpx;
		font-weight: bold;
		color: #000;
		background-color: #F7F7F7;
	}

	.btn_type_sel {
		border-radius: 8rpx;
		padding: 8rpx 16rpx 8rpx 16rpx;
		font-weight: bold;
		color: #EE733A;
		background-color: #FCEFE6;
	}

	.clear_all {
		text-align: right;
		padding: 24rpx 24rpx 24rpx 0;
		font-size: 24rpx;
		color: #DC6D45;
	}

	.btn_ok {
		align-self: center;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: bold;
		background: #F7D34B;
		border-radius: 16rpx;
		margin: 24rpx 0 36rpx 0;
	}

	/* 日期时间选择器 */
	#uni_dt_picker {
		text-align: right;
		max-width: 58%;
		padding: 0 12rpx 0 0;
		border: solid 1rpx #cccccc;
		border-radius: 8rpx;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100vw;
		height: 34vh;
		background-color: white;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.pop_div_1 {
		display: flex;
		justify-content: space-between;
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}
</style>